{extend name="index/base" /}


{block name='title'}{:empty($goodsInfo['meta_desc'])?$goodsInfo['name']:$goodsInfo['meta_desc']}{/block}
{block name='platform_description'}{:empty($goodsInfo['meta_desc']) ? \\app\\common\\model\\SysSettingModel::getContent('normal','platform_description') : $goodsInfo['meta_desc']}{/block}
{block name='platform_keywords'}{:empty($goodsInfo['meta_key']) ? \\app\\common\\model\\SysSettingModel::getContent('normal','platform_keyword') : $goodsInfo['meta_key']}{/block}
{block name='content'}

<div class="wrapper-body">
    <div class="container my-5">
        <div class="goods-gallery row">
            <!-- Product gallery-->
            <div class="col-lg-6">
                <div class="product-gallery clearfix">
                    <div class="product-gallery-preview" @click="imageZoom = false">
                        <div class="slider slider-preview">
                            {volist name="goodsInfo['img']" id="vo"}
                            <div class="product-gallery-preview-item">
                                <img class="image-zoom" src="{$vo}" alt="{$goodsInfo['name']}" @click.stop="clickZoom" />
                                <div class="image-zoom-pane" v-show="imageZoom">
                                    <a class="cloud-zoom" href="{$vo}" rel="position: 'inside' ,smoothMove: '1', showTitle: false, adjustX:0, adjustY:0" @click.stop="imageZoom = false">
                                        <img class="cloud-zoom-image" src="{$vo}" alt="{$goodsInfo['name']}" />
                                    </a>
                                </div>
                            </div>                         
                            {/volist}
                        </div>
                        

                    </div>
                    <div class="product-gallery-thumblist">
                        <div class="slider slider-thumblist">
                            {volist name="goodsInfo['img']" id="vo"}
                            <div class="product-gallery-thumblist-item">
                                <a href="javascript:;">
                                    <img src="{$vo}" alt="{$goodsInfo['name']}" />
                                </a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="addthis_toolbox">
                    <a href="//www.facebook.com/sharer.php?u={:request()->url(true)}" target="_blank" class="addthis_button">
                        <img src="/assets/images/facebook.png" width="34" height="34" />
                    </a>
                    <a href="//twitter.com/share?text={$goodsInfo['name']}&url={:request()->url(true)}" target="_blank" class="addthis_button">
                        <img src="/assets/images/twitter.png" width="34" height="34" />
                    </a>

                    <a href="//pinterest.com/pin/create/button/?url={:request()->url(true)}" target="_blank" class="addthis_button">
                        <img src="/assets/images/pinterest.png" width="34" height="34" />
                    </a>

                    <a href="http://www.linkedin.com/shareArticle?mini=true&url={:request()->url(true)}&title={$goodsInfo['name']}&source=lovessales" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=380,width=660');return false;" class="addthis_button">
                        <img src="/assets/images/linked.png" width="34" height="34" />
                    </a>
                </div>

            </div>
            <div class="col-lg-6">
                <div class="goods-info ">
                    <div class="goods-title"> <h1 class="goods-text">{$goodsInfo['name']}</h1></div>


                    <div class="review-info-wrapper">
                        <div class="review-info clearfix mt-1">
                            <p class="star js-avgrate-star js-rate-star">

                                {:empty($goodsInfo['score'])?'':str_repeat('<i class="review-star rated" ></i>',$goodsInfo['score'])}

                            </p>
                            <p class="js-rate-all ml-1">{$goodsInfo['score']}</p>

                        </div>
                    </div>



                    <div class="price-info">
                        <span class="shop-price">{$money_f}{$goodsInfo['sold_price']}</span>
                        <!-- <span class="market-price">{$money_f}{$goodsInfo['og_price']}</span> -->
                    </div>

                    <!--<table id="date_table" class="pc_date_table sublimated">
                        <thead>
                            <tr>
                                <th>Decoration</th>
                                <th>SHIPPING ON</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr title="Printed" class="selected">
                                <td>Sublimation</td>
                                <td><div class="calendar">
                                   <div class="month new_month">Mar</div>
                                    <div class="day new_day">15</div>
                                  </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>-->

                    <div class="options">
                        <!-- <div class="fieldset">
                            <div class="field">
                                <label class="required"><em>*</em>Step 2: Choose a decoration option</label>
                                <div class="control">
                                    <div class="options-list" >
                                        <div class="field choice admin__field admin__field-option dpo_swatch_text">
                                            <label class="label admin__field-label" for="options_1001_2"><span>Standard</span></label>
                                        </div>
                                        <div class="field choice admin__field admin__field-option dpo_swatch_text">
                                            <label class="label admin__field-label" for="options_1001_3"><span>Bespoke</span></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->

                        <!-- <div class="fieldset">
                            <table class="form-list option-fields-cols-2">
                                <tbody>
                                    <tr class="fields">
                                        <td>
                                            <div class="field">
                                                <div class="control">
                                                   <img src="https://cdn.shopify.com/s/files/1/0122/2836/2302/t/4/assets/dpo_custom_option_74994_00.jpg?v=1628500832" alt="" title="" class="">
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div> -->

                        <!--<div class="fieldset">
                            <div class="fields">
                                <strong>Step 1: Team Information</strong>
                            </div>

                            <div class="fields">
                                <div class="field">
                                    <div class="control">
                                        <div class="options-list" id="options-1004-list">

                                            <div class="field choice admin__field admin__field-option">
                                                <input type="checkbox" class="checkbox admin__control-checkbox  product-custom-option" name="options[1004][]" id="options_1004_2" value="10003" price="0.00">
                                                <label class="label admin__field-label" for="options_1004_2"><span>Team name(Optional)</span></label>
                                            </div><div class="field choice admin__field admin__field-option">
                                                <input type="checkbox" class="checkbox admin__control-checkbox  product-custom-option" name="options[1004][]" id="options_1004_3" value="10004" price="0.00">
                                                <label class="label admin__field-label" for="options_1004_3"><span>Logo(Optional)</span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->

                        <div class="fieldset fieldset-step1">
                            <!--<div class="fields">
                                <div class="field">
                                    <label>Team Name</label>
                                    <div class="control">
                                       <input type="text" class="input-text form-control" name="properties[Team Name]" value="">
                                    </div>
                                </div>

                                <div class="field">
                                    <label>Font Style</label>
                                    <div class="control">
                                        <select name="properties[Font Style]" class="form-control admin__control-select" title="">
                                            <option value="">&#45;&#45; Please Select &#45;&#45;</option>
                                            <option value="10005" price="0.00">FONT_1 </option><option value="10006" price="0.00">FONT_2 </option><option value="10007" price="0.00">FONT_3 </option><option value="10008" price="0.00">FONT_4 </option><option value="10009" price="0.00">FONT_5 </option><option value="10010" price="0.00">FONT_6 </option><option value="10011" price="0.00">FONT_7 </option><option value="10012" price="0.00">FONT_8 </option><option value="10013" price="0.00">FONT_9 </option><option value="10014" price="0.00">FONT_10 </option><option value="10015" price="0.00">FONT_11 </option><option value="10016" price="0.00">FONT_12 </option><option value="10017" price="0.00">FONT_13 </option><option value="10018" price="0.00">FONT_14 </option><option value="10019" price="0.00">FONT_15 </option><option value="10020" price="0.00">FONT_16 </option>
                                        </select>
                                    </div>
                                </div>
                            </div>-->
                            <div class="fields">
                                <strong>Step 1: Upload Image</strong>
                            </div>
                            <div class="fields">
                                <div class="control">
                                    <!-- //图片说明 -->
                                    <img src="{$goodsInfo['spe_img']}" alt="" title="" class="">

                                    <!-- //文字说明 -->
                                    <p style="white-space: break-spaces;">{$goodsInfo['intro']}</p>
                                </div>
                            </div>
                            <div class="fields" v-for="(item,index) in temp.logo_list" :key="index">
                                <div class="field">
                                    <label>Logo</label>
                                    <div class="control">
                                        <img :src="item.logo" width="50" height="50" id="my_avatar" v-show="item.logo">
                                        <file-upload :showFileList="false" :upload-success="(res)=>onHandleSuccessFile(res,item)" >
                                            <el-button size="small" slot="trigger" type="primary">Upload {{item.title}}</el-button>
                                        </file-upload>
                                    </div>
                                </div>

                                <div class="field">
                                    <label>Name</label>
                                    <div class="control">
                                        <input class="input-text form-control" v-model="item.name" maxlength="50" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--<div class="fieldset">
                            <div class="fields">
                                <div class="field">
                                    <label>Number Print Choice</label>
                                    <div class="control">
                                        <select name="properties[Number Print Choice]" class="form-control admin__control-select" title="">
                                            <option value="">&#45;&#45; Please Select &#45;&#45;</option>
                                            <option value="10021" price="0.00">Both Sides </option>
                                            <option value="10022" price="0.00">No Front Number  </option>
                                            <option value="10023" price="0.00">No Back Number  </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>-->

                        <div class="fieldset fieldset-step2">
                            <div class="fields">
                                <strong>Step 2: Information</strong>
                            </div>

                                <div class="fields">
                                    <div class="field">
                                        <label>Number</label>
                                        <div class="control">
                                            <input type="number" class="input-text form-control" v-model="temp.buy_num"  min="1"/>
                                        </div>
                                    </div>
                                </div>
                                <template v-for="(itemInfo,itemIndex) in temp.list" :key="itemIndex">
                                <div class="fields" >
                                    <div class="field">
                                        <label>Size</label>
                                        <div class="control">
                                            <select  class="form-control admin__control-select" v-model="temp.list[itemIndex].size" title="">
                                                <option value="">-- Please Select --</option>
                                                <option :value="size_item"  v-for="(size_item,size_index) in size_list" :key="size_index">{{size_item}} </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <label>Name</label>
                                        <div class="control">
                                            <input type="text" class="input-text form-control" v-model="temp.list[itemIndex].name" value="">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <label>Color</label>
                                        <div class="control">
                                            <input type="text" class="input-text form-control" v-model="temp.list[itemIndex].color" value="">
                                        </div>
                                    </div>
                                    <!--<div class="field">
                                        <label>Number</label>
                                        <div class="control">
                                            <input type="text" class="input-text form-control" name="properties[01 Number]" value="">
                                        </div>
                                    </div>-->
                                </div>
                            </template>
                        </div>

                        <div class="fieldset fieldset-step3">
                            <div class="fields">
                                <strong>Step 3:Special requirements and additional notes</strong>
                            </div>
                            <div class="fields">

                                <div class="field">
                                    <div class="control">
                                        <textarea class="form-control" v-model="temp.remark" rows="5" cols="25"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="cart-bottom-box" >
                        <el-button :loading="submitLoading" href="javascript:;" class="add-to-cart"  @click="handleSubmit">Buy Now</el-button>
                    </div>







                    <!-- <div class="goods-collocation-section">
                        <p class="collocation-section-title">STYLE WITH</p>

                        <div class="goods-collocation-content">
                            <div class="slider goods-items">
                                <div class="px-2">
                                    <a class="goods-collocation-group" v-for="(item,index) in ad_list" :key="index" href="javascript:;">
                                        <img :src="item.img" :alt="item.name">
                                        <span class="buy-together-match" v-if="item.list.length>0" @click.stop="ad_obj=item">GET THE LOOK</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>




        <div class="tabs-listing">
            <ul class="product-tabs nav nav-tabs">
                <li class=""><a class="tablink active" href="#Details" data-bs-toggle="tab" role="tab" aria-selected="true">Product Details</a></li>
                <li class=""><a class="tablink" href="#Returns"  data-bs-toggle="tab" role="tab" aria-selected="false">Shipping &amp; Returns</a></li>
            </ul>

            <div class="tab-container">
                <div class="tab-content">
                    <div class="tab-pane fade show active" novalidate id="Details">{$goodsInfo['content']|raw}</div>

                    <div class="tab-pane fade" novalidate id="Returns">
                        {:\\app\\common\\model\\SysSettingModel::getContent('shipping_returns')}
                    </div>

                </div>
            </div>
        </div>

        <!-- CUSTOMERS ALSO VIEWED -->
        <section class="recommend-wrapper">
            <div class="container">
                <div class="section-title">CUSTOMERS ALSO VIEWED</div>

                <!-- Products grid-->
                <div class="grid-products clearfix">
                    <!-- Product-->
                    <div class="slider viewed-items">
                        {selfTag:multi viewModel="\app\common\model\GoodsModel" where='["session_id"=>\think\facade\Session::instance()->getId(),"uid"=>session("user_info.user_id"),"activeState"=>"user_up"]'}
                            {include file="goods/include_item" /}
                         {/selfTag:multi}
                    </div>
                </div>
            </div>
        </section>




    </div>

</div>

{/block}
{block name='script'}

<!-- Vendor scrits: js libraries and plugins-->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/smooth-scroll.polyfills.min.js"></script>

<link rel="stylesheet" type="text/css" href="/assets/css/slick.css"/>
<script type="text/javascript" src="/assets/js/slick.min.js"></script>
<script type="text/javascript" src="/assets/js/cloud-zoom.1.0.2.js"></script>

<script>
    function initPageJq(){
        $('.slider-preview').slick({
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            asNavFor: '.slider-thumblist'
        });

        $('.slider-thumblist').slick({
            verticalSwiping: true,
            vertical: true,
            infinite: false,
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: '.slider-preview',
            focusOnSelect: true,
            responsive: [{
                breakpoint: 750,
                settings: {
                    slidesToShow: 5,
                    vertical: false,
                    swipe: true,
                    verticalSwiping: false,
                    draggable: false
                }
            }, {
                breakpoint: 640,
                settings: {
                    slidesToShow: 4,
                    vertical: false,
                    swipe: true,
                    verticalSwiping: false,
                    draggable: false
                }
            }]
        });

        $('.viewed-items').slick({
            infinite: false,
            slidesToShow: 5,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
            ]
        });

        // $('.goods-items').slick({
        //   infinite: false,
        //   speed: 300,
        //   slidesToShow: 3,
        // });   

    };



    layui.extend({
        fileUpload: 'vue-components/fileUpload',
    }).use(['fileUpload'], function (fileUpload) {

        var custom_num = {:json_encode($custom_logo_num_intro)};

        initVue({
            data: {
                submitLoading:false,
                imageZoom:false,
                
                size_list:[
                    'S','M','L','XL','XXL','XXL','3XL','4XL'
                ],
                color_list:[
                    'RED','GREEN','BLUE'
                ],
                custom_num: custom_num,
                temp:{
                    goods_id:"{$goodsInfo['id']}",
                    logo:'',
                    buy_num:0,
                    logo_list:[],
                    list:[],
                    remark:[],
                },


            },
            components: {

            },
            watch:{
                'temp.buy_num':function(value,old_value){
                    var num = value - 0
                    var dis_num = this.temp.list.length - num
                    if(dis_num >= 0){
                        this.temp.list =this.temp.list.slice(0,num)
                    }else{
                        for(var i=0; i< -dis_num; i++){
                            this.temp.list.push(this.generateTemp({}))
                        }
                    }
                }
            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {
                this.temp.buy_num = 1
                var logo_list = []
                for (var i=0;i<this.custom_num.length;i++){
                    var info = this.custom_num[i]
                    logo_list.push(this.generateTempLog({title:info}))
                }
                this.temp.logo_list = logo_list

                this.$nextTick(function(){
                    // setTimeout(function(){
                    initPageJq()
                    // },500)
                    // initCloudZoom()
                })
            },
            methods:{
                clickZoom:function(){
                    this.imageZoom = true
                    this.$nextTick(function(){
                        initCloudZoom()
                    })
                },
                generateTemp:function(item){
                    return {
                        size:item.size||'XL',
                        name:item.name||'',
                        color:item.color||'',
                    };
                },
                generateTempLog:function(item){
                    return {
                        title:item.title||'',
                        logo:item.logo||'',
                        name:item.name||'',
                    }
                },
                onHandleSuccessFile:function(res,item){
                    const data = res.data||{}
                    item.logo = data.key||''
                },
                handleSubmit:function(){
                    var that = this;
                    this.submitLoading = true
                    this.$network('goods/addCustom', this.temp).then(function(res){
                        that.$message.success(res.msg)
                        const data = res.data||{}
                        setTimeout(function(){
                            location.href="/order/preview?channel=cart_custom"
                        },1000)


                        that.submitLoading = false
                    }).catch(function(err){
                        that.submitLoading = false
                    })
                },

            },
        })
    })


</script>
{/block}